<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body custom-class="import-dialog">
      <el-table v-loading="loading" :data="list" ref="table">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="操作时间" align="center" prop="createTime"/>
        <el-table-column label="类型" align="center" prop="visaRecordType">
          <template #default="scope">
            {{ recordTypeText(scope.row.visaRecordType) }}
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="visaNum"/>
        <el-table-column label="备注" align="center" prop="recordRemark"/>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { listElectronicVisaRecord } from '@/api/electronicVisa'

export default {
  props: {
    title: {
      default: '明细'
    },
    value: {
      default: false
    },
    id: {
      default: undefined
    }
  },
  data() {
    return {
      visible: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tenantId: undefined,
        visaId: undefined
      },
      // 总条数
      total: 0,
      //列表
      list: [],
      //记录类型
      recordTypeList: [
        { label: '增加', value: 0 },
        { label: '扣减', value: 1 }
      ]
    }
  },
  computed: {
    recordTypeText() {
      return (value) => {
        let obj = this.recordTypeList.find(item => item.value == value)
        return obj ? obj.label : ''
      }

    }

  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
      this.visible = newVal // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit('input', val) // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    }
  },
  methods: {
    init() {
      this.getList()
    },
    getList() {
      this.loading = true
      // this.queryParams.visaId = this.id
      this.queryParams.tenantId = this.id
      listElectronicVisaRecord(this.queryParams)
        .then((response) => {
          this.list = response.rows
          this.total = response.total
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
